# Component: Shop Cart Button

Floating action button for cart access with live totals

Ecommerce Atom

### BEM Anatomy

| Type      | Class Name             | Description                                                                  |
| --------- | ---------------------- | ---------------------------------------------------------------------------- |
| ==Block== | `.as-shop-cart-button` | Outer container managing margin and placement in the header.                 |
| Element   | `__button`             | The interactive pill button. Features a shadow and rounded-pill edges.       |
| Element   | `__wrapper`            | Internal flex container that aligns the price and the icon/badge group.      |
| Element   | `__price`              | Displays the currency-formatted subtotal. Expands via `flex-grow`.           |
| Element   | `__count-wrapper`      | Relative container that handles the stacking of the cart icon and the badge. |
| Element   | `__icon`               | The shopping cart/basket icon (typically Font Awesome).                      |
| Element   | `__badge`              | Absolute-positioned notification bubble for the item count.                  |

### Interactive Summary Logic

The button uses a flexbox wrapper to separate the monetary value from the item count. The badge is positioned at the top-right of the icon container, using a red (danger) background to draw user attention to their active selection.

##### Generated HTML

```html
<div class="as-shop-cart-button">
    <button class="as-shop-cart-button__button btn btn-light">
        <div class="as-shop-cart-button__wrapper">
            <div class="as-shop-cart-button__price">$45.50</div>
            <div class="as-shop-cart-button__count-wrapper">
                <i class="as-shop-cart-button__icon fa-solid fa-cart-shopping"></i>
                <span class="as-shop-cart-button__badge badge">3</span>
            </div>
        </div>
    </button>
</div>
```

##### SCSS

```scss
.as-shop-cart-button {
  &__button {
    border-radius: 50rem; // Pill shape
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  }

  &__count-wrapper {
    position: relative;
    white-space: nowrap;
  }

  &__badge {
    position: absolute !important;
    top: 0 !important;
    left: 100%;
    // Center the badge on the top-right corner
    transform: translate(-50%, -50%); 
    background-color: var(--bs-danger);
  }
}
```
